<template>
  <div class="page-header-index-wide">
    <!--    <a-row :gutter="24">
          <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
            <chart-card :loading="loading" title="总销售额" total="￥126,560">
              <a-tooltip title="指标说明" slot="action">
                <a-icon type="info-circle-o" />
              </a-tooltip>
              <div>
                <trend flag="up" style="margin-right: 16px;">
                  <span slot="term">周同比</span>
                  12%
                </trend>
                <trend flag="down">
                  <span slot="term">日同比</span>
                  11%
                </trend>
              </div>
              <template slot="footer">日均销售额<span>￥ 234.56</span></template>
            </chart-card>
          </a-col>
          <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
            <chart-card :loading="loading" title="访问量" :total="8846 | NumberFormat">
              <a-tooltip title="指标说明" slot="action">
                <a-icon type="info-circle-o" />
              </a-tooltip>
              <div>
                <mini-area />
              </div>
              <template slot="footer">日访问量<span> {{ '1234' | NumberFormat }}</span></template>
            </chart-card>
          </a-col>
          <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
            <chart-card :loading="loading" title="支付笔数" :total="6560 | NumberFormat">
              <a-tooltip title="指标说明" slot="action">
                <a-icon type="info-circle-o" />
              </a-tooltip>
              <div>
                <mini-bar :height="40" />
              </div>
              <template slot="footer">转化率 <span>60%</span></template>
            </chart-card>
          </a-col>
          <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
            <chart-card :loading="loading" title="运营活动效果" total="78%">
              <a-tooltip title="指标说明" slot="action">
                <a-icon type="info-circle-o" />
              </a-tooltip>
              <div>
                <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8" />
              </div>
              <template slot="footer">
                <trend flag="down" style="margin-right: 16px;">
                  <span slot="term">同周比</span>
                  12%
                </trend>
                <trend flag="up">
                  <span slot="term">日环比</span>
                  80%
                </trend>
              </template>
            </chart-card>
          </a-col>
        </a-row>-->

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a @click="changedailyReportDateRange(1)">今日</a>
              <a @click="changedailyReportDateRange(2)">本周</a>
              <a @click="changedailyReportDateRange(3)">本月</a>
              <a @click="changedailyReportDateRange(4)">本季</a>
              <a @click="changedailyReportDateRange(5)">本年</a>
            </div>
            <a-range-picker @change="changeRangDate" :style="{width: '256px'}"/>
          </div>
          <a-tab-pane loading="true" tab="一周日报统计" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar title="一周日报统计" :dataSource="dailyDateSource" yaxisText="数量"/>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="一周日报统计" :list="dailyDateList"/>
              </a-col>
            </a-row>
          </a-tab-pane>

          <a-tab-pane tab="人员统计" key="2">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :title="'人员日报统计('+daliyTimeInfo+')'" :dataSource="dailyUserSource" yaxisText="数量"/>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list :title="'人员日报统计('+daliyTimeInfo+')'" :list="dailyUserList"/>
              </a-col>
            </a-row>
          </a-tab-pane>

          <a-tab-pane tab="有效mantis排行" key="3">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :title="'有效mantis排行('+daliyTimeInfo+')'" :dataSource="userMantisSource" yaxisText="数量"/>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list :title="'有效mantis排行('+daliyTimeInfo+')'" :list="userMantisList"/>
              </a-col>
            </a-row>
          </a-tab-pane>

          <a-tab-pane tab="人员工作量统计" key="4">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :title="'人员工作量统计('+daliyTimeInfo+')'" :dataSource="dailyHourSource" yaxisText="人天"/>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list :title="'人员工作量统计('+daliyTimeInfo+')'" :list="dailyHourList"/>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="mantis重复指数" key="5">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :title="'mantis重复指数('+daliyTimeInfo+')'" :dataSource="userMantisRepeatSource" yaxisText="数量"/>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list :title="'有效mantis排行('+daliyTimeInfo+')'" :list="userMantisRepeatList"/>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
    <a-card :bordered="false" title="工作量统计" :style="{ marginTop: '24px' }">
      <a-range-picker slot="extra" @change="changeRangDate2" :style="{width: '256px'}"/>
      <template>
        <a-table
          ref="table"
          size="middle"
          bordered
          :columns="columns" :data-source="data" @change="onTableChange">
        <span slot="mantis" slot-scope="text, record">
          <a @click="gotoMantis(text)">{{text}}</a>
        </span>
        </a-table>
      </template>
    </a-card>
    <a-row>
      <a-col :span="24">
        <a-card :loading="loading" :bordered="false" title="最近一周访问次数统计" :style="{ marginTop: '24px' }">
          <a-row>
            <a-col :span="6">
              <head-info title="今日访问IP数" :content="loginfo.todayIp"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class='circle-cust'>
                <a-icon slot="indicator" type="environment" style="font-size: 24px"/>
              </a-spin>
            </a-col>
            <a-col :span="6">
              <head-info title="今日访问次数" :content="loginfo.todayVisitCount"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class='circle-cust'>
                <a-icon slot="indicator" type="team" style="font-size: 24px"/>
              </a-spin>
            </a-col>
            <a-col :span="6">
              <head-info title="访问总次数" :content="loginfo.totalVisitCount"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class='circle-cust'>
                <a-icon slot="indicator" type="rise" style="font-size: 24px"/>
              </a-spin>
            </a-col>
          </a-row>
          <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import ChartCard from '@/components/ChartCard'
  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import MiniArea from '@/components/chart/MiniArea'
  import MiniBar from '@/components/chart/MiniBar'
  import MiniProgress from '@/components/chart/MiniProgress'
  import RankList from '@/components/chart/RankList'
  import Bar from '@/components/chart/Bar'
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import HeadInfo from '@/components/tools/HeadInfo.vue'

  import Trend from '@/components/Trend'
  import {getLoginfo, getVisitInfo} from '@/api/api'
  import {getAction, deleteAction, putAction, postAction, putActionObj} from '@/api/manage'
  import moment from "moment"

  export default {
    name: "Analysis",
    components: {
      ATooltip,
      ACol,
      ChartCard,
      MiniArea,
      MiniBar,
      MiniProgress,
      RankList,
      Bar,
      Trend,
      LineChartMultid,
      HeadInfo
    },
    data() {
      return {
        data: [],
        columns: [
          {
            title: '姓名',
            dataIndex: 'user_name'
          },
          {
            title: 'Mantis',
            dataIndex: 'mantis_code',
            defaultSortOrder: 'descend',
            scopedSlots: {customRender: 'mantis'},
          },
          {
            title: '工作量(人天)',
            dataIndex: 'workload',
            // sorter: (a, b) => a.address.length - b.address.length,
          },
          {
            title: '完成天数',
            dataIndex: 'times',
            //sorter: (a, b) => a.address.length - b.address.length,
          }],
        loading: true,
        center: null,
        daliyTimeInfo: '7天',
        dailyDateList: [],
        dailyDateSource: [],
        dailyUserList: [],
        dailyUserSource: [],
        dailyHourList: [],
        dailyHourSource: [],
        userMantisList: [],
        userMantisSource: [],
        userMantisReportParam: {},
        userMantisRepeatList: [],
        userMantisRepeatSource: [],
        userMantisRepeatReportParam: {},
        dailyUserReportParam: {
          groupField: "user_name",
          groupResult: "user_name,count(1) 'counts'",
          orderField: 'order by count(user_name) desc'
        },
        dailyDateReportParam: {
          groupField: "job_date",
          groupResult: "job_date,count(1) 'counts'",
          orderField: 'order by job_date desc'
        },
        dailyHourReportParam: {
          groupField: "user_name",
          groupResult: "user_name,sum(work_hour) 'counts'",
          orderField: 'order by sum(work_hour) desc'
        },
        userMantisWorkloadReportParam: {},
        loginfo: {},
        visitFields: ['ip', 'visit'],
        visitInfo: [],
        indicator: {}
      }
    },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
      this.initLogInfo();

    },
    activated() {
      this.daliyTimeInfo = '7天',
        this.initReport();
    },
    methods: {
      onTableChange(pagination, filters, sorter) {
        console.log('params', pagination, filters, sorter);
      },
      changeRangDate(mode, value) {
        console.log(value);
        console.log(mode);
        var startDate = value[0], endDate = value[1];
        this.daliyTimeInfo = startDate + "~" + endDate;
        this.initUserDailyReport(startDate, endDate);
        this.initHourDailyReport(startDate, endDate);
        this.initUserMantisReport(startDate, endDate);
        this.initUserMantisRepeatReport(startDate, endDate);
      },
      changeRangDate2(mode, value) {
        var startDate = value[0], endDate = value[1];
        var showDateStr = startDate + "~" + endDate;
        this.userMantisWorkloadReportParam.jobDateStart = startDate;
        this.userMantisWorkloadReportParam.jobDateEnd = endDate;
        this.qryUserWorkloadTable();
      },
      qryUserWorkloadTable() {
        var That = this;
        getAction("/oas/oasTimesheetReport/userMantisWorkloadReport", That.userMantisWorkloadReportParam).then((res) => {
          var reportResult = res.result;
          That.data = reportResult;
          console.log(reportResult);
          console.log(res);
        });
      },

      changedailyReportDateRange(type) {
        var startDate, endDate;
        if (type == 2) {
          startDate = moment().startOf('week').format('YYYY-MM-DD');
          endDate = moment().endOf('week').format('YYYY-MM-DD');
        } else if (type == 3) {
          startDate = moment().startOf('month').format('YYYY-MM-DD');
          endDate = moment().endOf('month').format('YYYY-MM-DD');
        } else if (type == 4) {
          startDate = moment().startOf('quarter').format('YYYY-MM-DD');
          endDate = moment().endOf('quarter').format('YYYY-MM-DD');
        } else if (type == 5) {
          startDate = moment().startOf('year').format('YYYY-MM-DD');
          endDate = moment().endOf('year').format('YYYY-MM-DD');
        }
        this.daliyTimeInfo = startDate + "~" + endDate;
        if (type == 1) {
          startDate = moment().format('YYYY-MM-DD');
          this.daliyTimeInfo = startDate;
        }
        this.initUserDailyReport(startDate, endDate);
        this.initHourDailyReport(startDate, endDate);
        this.initUserMantisReport(startDate, endDate);
        this.initUserMantisRepeatReport(startDate, endDate);
      },
      initUserDailyReport(startDate, endDate) {
        this.dailyUserList = [];
        this.dailyUserSource = [];
        this.dailyUserReportParam.jobDateStart = startDate || moment().subtract(6, 'day').format("YYYY-MM-DD");
        this.dailyUserReportParam.jobDateEnd = endDate;
        var That = this;
        getAction("/oas/oasTimesheetReport/userGroup", That.dailyUserReportParam).then((res) => {
          var reportResult = res.result;
          for (let i = 0; i < reportResult.length; i += 1) {
            That.dailyUserList.push({
              name: reportResult[i].user_name,
              total: reportResult[i].counts + '条日报'
            })
            That.dailyUserSource.push({
              x: reportResult[i].user_name,
              y: reportResult[i].counts
            })
          }
        });
      },
      initHourDailyReport(startDate, endDate) {
        this.dailyHourList = [];
        this.dailyHourSource = [];
        this.dailyHourReportParam.jobDateStart = startDate || moment().subtract(6, 'day').format("YYYY-MM-DD");
        this.dailyHourReportParam.jobDateEnd = endDate;
        var That = this;
        getAction("/oas/oasTimesheetReport/userGroup", That.dailyHourReportParam).then((res) => {
          var reportResult = res.result;
          for (let i = 0; i < reportResult.length; i += 1) {
            That.dailyHourList.push({
              name: reportResult[i].user_name,
              total: reportResult[i].counts + '人天'
            })
            That.dailyHourSource.push({
              x: reportResult[i].user_name,
              y: reportResult[i].counts
            })
          }
        });
      },
      initUserMantisReport(startDate, endDate) {
        this.userMantisList = [];
        this.userMantisSource = [];
        this.userMantisReportParam.jobDateStart = startDate || moment().subtract(6, 'day').format("YYYY-MM-DD");
        this.userMantisReportParam.jobDateEnd = endDate;
        var That = this;
        getAction("/oas/oasTimesheetReport/userMantisReport", That.userMantisReportParam).then((res) => {
          var reportResult = res.result;
          for (let i = 0; i < reportResult.length; i += 1) {
            That.userMantisList.push({
              name: reportResult[i].user_name,
              total: reportResult[i].counts + '个数'
            })
            That.userMantisSource.push({
              x: reportResult[i].user_name,
              y: reportResult[i].counts
            })
          }
        });
      },
      initUserMantisRepeatReport(startDate, endDate) {
        this.userMantisRepeatList = [];
        this.userMantisRepeatSource = [];
        this.userMantisRepeatReportParam.jobDateStart = startDate || moment().subtract(6, 'day').format("YYYY-MM-DD");
        this.userMantisRepeatReportParam.jobDateEnd = endDate;
        this.userMantisRepeatReportParam.checkRepeat = 1;
        var That = this;
        getAction("/oas/oasTimesheetReport/userMantisReport", That.userMantisRepeatReportParam).then((res) => {
          var reportResult = res.result;
          for (let i = 0; i < reportResult.length; i += 1) {
            That.userMantisRepeatList.push({
              name: reportResult[i].user_name,
              total: reportResult[i].counts + '个重复' + reportResult[i].repeat_num + '次'
            })
            That.userMantisRepeatSource.push({
              x: reportResult[i].user_name,
              y: reportResult[i].repeat_radio
            })
          }
        });
      },
      initDailyDateReport() {
        this.dailyDateList = [];
        this.dailyDateSource = [];
        this.dailyDateReportParam.jobDateStart = moment().subtract(6, 'day').format("YYYY-MM-DD");
        var That = this;
        getAction("/oas/oasTimesheetReport/userGroup", That.dailyDateReportParam).then((res) => {
          var reportResult = res.result;
          for (let i = 0; i < reportResult.length; i += 1) {
            That.dailyDateList.push({
              name: reportResult[i].job_date,
              total: reportResult[i].counts + '条日报'
            })
            That.dailyDateSource.push({
              x: reportResult[i].job_date + ' ',
              y: reportResult[i].counts
            })
          }
        });
      },
      gotoMantis(mantisCode) {
        window.open('http://10.2.183.73/mantisbt/view.php?id=' + mantisCode, '_blank');
      },
      initReport() {
        this.initUserDailyReport();
        this.initHourDailyReport();
        this.initDailyDateReport();
        this.initUserMantisReport();
        this.initUserMantisRepeatReport();
      },
      initLogInfo() {
        getLoginfo(null).then((res) => {
          if (res.success) {
            Object.keys(res.result).forEach(key => {
              res.result[key] = res.result[key] + ""
            })
            this.loginfo = res.result;
          }
        })

      },
    }
  }
</script>

<style lang="scss" scoped>
  .circle-cust {
    position: relative;
    top: 28px;
    left: -100%;
  }

  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  /* 首页访问量统计 */
  .head-info {
    position: relative;
    text-align: left;
    padding: 0 32px 0 0;
    min-width: 125px;

    &.center {
      text-align: center;
      padding: 0 32px;
    }

    span {
      color: rgba(0, 0, 0, .45);
      display: inline-block;
      font-size: .95rem;
      line-height: 42px;
      margin-bottom: 4px;
    }

    p {
      line-height: 42px;
      margin: 0;

      a {
        font-weight: 600;
        font-size: 1rem;
      }
    }
  }
</style>